<template>
  <div>
    <div
      ><el-button type="primary"
          @click=" dialogFormVisible2=true">新增学生</el-button>
    </div>
    <div>
      <el-dialog title="新增用户" :visible.sync="dialogFormVisible2" style="text-align: center">
        <el-form :model="form">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form.name" ></el-input>
          </el-form-item>
        </el-form>
        <el-form :model="form">
          <el-form-item label="学院" :label-width="formLabelWidth">
            <el-input v-model="form.academic" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <el-form :model="form">
          <el-form-item label="健康状态" :label-width="formLabelWidth">
            <el-input v-model="form.health" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <el-form :model="form">
          <el-form-item label="工作状态" :label-width="formLabelWidth">
            <el-input v-model="form.statue" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <el-form :model="form">
          <el-form-item label="体温" :label-width="formLabelWidth">
            <el-input v-model="form.temper" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible2 = false,addUser()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="name"
          label="姓名"
          width="200">
        </el-table-column>
        <el-table-column
          prop="academic"
          label="学院">
        </el-table-column>
        <el-table-column
          prop="health"
          label="健康状态">
        </el-table-column>
        <el-table-column
          prop="statue"
          label="工作状态">
        </el-table-column>
        <el-table-column
          prop="temper"
          label="体温">
        </el-table-column>
        <el-table-column
          prop="home"
          label="是否居家">
        </el-table-column>
        <el-table-column
          prop="operation"
          label="操作"
          align="center"
          width="300px"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="
                  edit(scope.row)
                  ,dialogFormVisible = true"
            >编辑</el-button
            >
            <el-button
              type="danger"
              @click="
                editInFo(scope.row)
                    "
            >修改密码</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-dialog title="编辑用户信息" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form.name" ></el-input>
          </el-form-item>
        </el-form>
        <el-form :model="form">
          <el-form-item label="学院" :label-width="formLabelWidth">
            <el-input v-model="form.academic" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <el-form :model="form">
          <el-form-item label="健康状态" :label-width="formLabelWidth">
            <el-input v-model="form.health" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <el-form :model="form">
          <el-form-item label="工作状态" :label-width="formLabelWidth">
            <el-input v-model="form.statue" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <el-form :model="form">
          <el-form-item label="体温" :label-width="formLabelWidth">
            <el-input v-model="form.temper" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible= false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible=false,submitPass()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Usermanager',
  data () {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name:'',
        academic:'',
        health: '',
        home: '',
        statue: '',
        temper: '',
        times: '',
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      dialogFormVisible: false,
      dialogFormVisible2:false,
      tableData: []

    }
  },
  created () {
    this.tablePrint();
    this.getParams();

  },
  methods:{
    addUser(){
      let  postData=this.$qs.stringify({
        name:this.form.name,
        academic:this.form.academic,
        health:this.form.health,
        statue:this.form.statue,
        temper:this.form.temper
      })
      axios.post('http://localhost:8181/manager/addUser',postData).then(res=>{

      })
    },
    //table中选中一行进行操作
    edit(row){
      let that = this;
      this.form.name=row.name;
      this.form.academic=row.academic;
      this.form.health=row.health;
      this.form.statue=row.statue;
      this.form.temper=row.temper;
    },
    editInFo(row) {
      // 这里row是dataTable数组
      let that = this;
      this.form.name=row.username;
      this.form.passwrod=row.password;
      that.editForm = {};
      that.editForm = row;
      //要传入后台的数据
      let  postData=this.$qs.stringify({
        id:this.editForm.id
      })
      axios.post(`http://localhost:8181/manager/deleteUser`,postData)
        .then(res=>{
          console.log(res)
          this.tablePrint();
        })

    },
    tablePrint(){
      this.axios.post('http://localhost:8181/manager/list').then(res=>{
        console.log(res)
        this.tableData=res.data
      })
    },
    getParams(){
      const routerParams = this.$route.query.table2;
      this.tableData=routerParams
    },
    submitPass(){
      let postData = this.$qs.stringify({
        temper:this.form.temper,
        health:this.form.health,
        statue:this.form.statue,
        name:this.form.name,
        academic:this.form.academic,
      })
      console.log(postData)
      axios.post(`http://localhost:8181/manager/edit`,postData)
        .then(res=>{
          console.log(res)
        })
    }
  },
  watch: {
// 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
    '$route': 'getParams'
  }
}
</script>

<style scoped>

</style>
